@extends('layouts.mobile_main')

@section('title', '充值确认')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
        .pay_sure_way1 span{margin-left: 0.6rem;background: url({{env('IMAGE_DOMAIN')}}images/recharge_weichat.png) 0 0.1rem no-repeat;background-size: 0.8rem;padding: 0.2rem 0 0.2rem 1.2rem;}
        .pay_sure_way2 span{margin-left: 0.6rem;background: url({{env('IMAGE_DOMAIN')}}images/recharge_alipay.png) 0 0.1rem no-repeat;background-size: 0.8rem;padding: 0.2rem 0 0.2rem 1.2rem;}
        .csda{}
    </style>
@endsection

@section('content')
    <div class="paysu_outer">
        <header class="pay_sure oh" style="background-color: #fff;">
            <a class="fl" href="javascript:history.go(-1);">
            <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_p.png?v={{env('IMAGE_VERSION')}}" alt=""></a>
            <span class="fl co_violet fz_48">充值确认</span>
        </header>
        <section class="welfare_center">
            <div class="tc pay_sure_money">
                <p class="fz_48 oh" style="padding: 0.3rem 0.6rem;">
                    <span class="fl">充值金额</span>
                    <span class="fr">￥{{$amount}}</span>
                </p>
                <p class="fz_48 oh" style="padding: 0.3rem 0.6rem;border-bottom: 1px solid #eee;">
                    <span class="fl">服务费</span>
                    <span class="fr">￥{{$amount*env('RECHARGE_FEE')}}</span>
                </p>
                <p class="fz_48 co_violet oh" style="padding: 0.3rem 0.6rem;">
                    <span class="fl">待支付金额</span>
                    <span class="fr fz_58">￥{{$amount+$amount*env('RECHARGE_FEE')}}</span>
                </p>
            </div>
            <p class="fz_40 co_gray pay_sure_way">支付方式</p>
            <div class="pay_sure_wayall">
                @if($useragent == 'wx')
                    <div class="oh pay_sure_way1">
                        <span class="fl fz_34">微信支付</span>
                        <img class="fr" src="{{env('IMAGE_DOMAIN')}}images/rechange_choice.png?v={{env('IMAGE_VERSION')}}" alt="">
                    </div>
                @else
                    <div class="oh pay_sure_way2">
                        <span class="fl fz_34">支付宝支付</span>
                        <img class="fr" src="{{env('IMAGE_DOMAIN')}}images/rechange_choice.png?v={{env('IMAGE_VERSION')}}" alt="">
                    </div>
                @endif
            </div>
            <button class="pay_sure_btn fz_50 tc" id="submit_pay">支付</button>
        </section>
    </div>
@endsection

@section('scriptResources')
    @parent
    <script>
        var amount = '{{$amount}}';
        window.onresize=function(){
            pagesp();
        }
        $(function(){
            var paysu_outer_h=$(window).height();
            $(".paysu_outer").css({"min-height":paysu_outer_h});
            // $(".pay_sure_wayall div").click(function(){
            //     var i=$(this).index();
            //     $(".pay_sure_wayall div img").eq(i).show().parent(".pay_sure_wayall div").siblings().children(".pay_sure_wayall div img").hide()
            // })
            var onoff=true;
            $(".pay_sure_wayall div").click(function(){
                if(onoff){
                   $(".pay_sure_wayall div img").hide();
                   onoff=false;
                }else{
                    $(".pay_sure_wayall div img").show();
                    onoff=true;
                }
            })
        })
        $("#submit_pay").click(function(){
            window.location.href = '/mobile/wallet/recharge/startpay?money=' + amount;
        });
    </script>
@endsection